import React, { useState } from 'react';
import styles from './Sidebar.module.css';

interface SidebarProps {
  activePage: string;
  onPageChange: (page: string) => void;
}

const Sidebar: React.FC<SidebarProps> = ({ activePage, onPageChange }) => {
  const [collapsed, setCollapsed] = useState(false);

  const toggleSidebar = () => {
    setCollapsed(!collapsed);
  };

  return (
    <div className={`${styles.sidebar} ${collapsed ? styles.collapsed : ''}`}>
      <div className={styles.sidebarHeader}>
        <span>{collapsed ? 'SM' : '学生管理系统'}</span>
        <button className={styles.toggleButton} onClick={toggleSidebar}>
          {collapsed ? '»' : '«'}
        </button>
      </div>
      <ul className={styles.menu}>
        <li
          className={`${styles.menuItem} ${activePage === 'students' ? styles.active : ''}`}
          onClick={() => onPageChange('students')}
        >
          <i>👥</i>
          <span>学生管理</span>
        </li>
        <li
          className={`${styles.menuItem} ${activePage === 'statistics' ? styles.active : ''}`}
          onClick={() => onPageChange('statistics')}
        >
          <i>📊</i>
          <span>信息统计</span>
        </li>
        <li
          className={`${styles.menuItem} ${activePage === 'recorder' ? styles.active : ''}`}
          onClick={() => onPageChange('recorder')}
        >
          <i>🎤</i>
          <span>语音笔记</span>
        </li>
        <li
          className={`${styles.menuItem} ${activePage === 'draftEdit' ? styles.active : ''}`}
          onClick={() => onPageChange('draftEdit')}
        >
          <i>📝</i>
          <span>接案笔记</span>
        </li>
        <li
          className={`${styles.menuItem} ${activePage === 'draftPreview' ? styles.active : ''}`}
          onClick={() => onPageChange('draftPreview')}
        >
          <i>👁️</i>
          <span>笔记预览</span>
        </li>
        <li
          className={`${styles.menuItem} ${activePage === 'chat' ? styles.active : ''}`}
          onClick={() => onPageChange('chat')}
        >
          <i>💬</i>
          <span>智能助手</span>
        </li>
      </ul>
    </div>
  );
};

export default Sidebar;